<template>
  <div class="tl pd_20" v-loading="load">
    <div class="bor add_con_item bg_write mar_bottom_25">
      <h5>基本信息</h5>
      <el-form :label-position="labelPosition" label-width="90px" :model="formLabelAlign" ref="formLabelAlign">
        <el-form-item label="商品栏目">
          <el-col :span="14">
            <el-col :span="24" v-for="(domain, index) in formLabelAlign.domains" :key="index">
              <el-col :span="7" class="mr">
                <el-cascader :options="option" :props="optionProps" :show-all-levels="false" change-on-select style="width: 100%" v-model="domain.value" placeholder="请选择栏目" @change="changeCate"></el-cascader>
              </el-col>

              <el-col :span="1" v-if="index == 0">
                <el-button :loading="$store.state.isLoading" @click="addDomain" type="primary" icon="el-icon-plus"></el-button>
              </el-col>
              <el-col :span="1" v-if="index > 0">
                <el-button :loading="$store.state.isLoading" @click.prevent="removeDomain(domain)" type="danger" icon="el-icon-delete"></el-button>
              </el-col>
            </el-col>
          </el-col>
          <el-col class="lh size_12 sizeColor">
            <div>
              PS：选择商品相关分类，点击选择栏目左侧 "[+]"
              可增加所属分类选择器，就是指一个产品可以放在多个分类下
            </div>
          </el-col>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-col :span="10">
            <el-input v-model="shopInfo.title"></el-input>
          </el-col>
          <el-col class="tc" :span="2">商品副标题</el-col>
          <el-col :span="10">
            <el-input v-model="shopInfo.sub_title"></el-input>
          </el-col>
          <el-col class="lh size_12 sizeColor pd_top_10">
            <div>
              PS：商品名称就是商品的标题部分，建议商品关键词组合为佳，写长点！编号：是对应您的ERP系统的产品编号，将来可用于导入ERP库存
            </div>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="淘宝链接">
          <el-col :span="10">
            <el-input v-model="shopInfo.tb_link"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="预计工期">
          <el-col :span="4">
            <el-input v-model="shopInfo.text_reserve">
            </el-input>
          </el-col>
        </el-form-item> -->
        <el-form-item label="市场价格">
          <el-col :span="4">
            <el-input v-model="shopInfo.market_price">
              <template slot="append">元</template>
            </el-input>
          </el-col>
          <el-col class="tc" :span="2" v-if="
              $store.state.plugin.shbxt &&
              $store.state.plugin.shbxt.is_open == 1
            ">供应商</el-col>
          <el-col :span="4" v-if="
              $store.state.plugin.shbxt &&
              $store.state.plugin.shbxt.is_open == 1
            ">
            <el-input disabled :value="shopInfo.sid_username">
              <template slot="append">{{ shopInfo.sid_nickname }}</template>
            </el-input>
          </el-col>
          <el-button style="margin-left: 10px" type="primary" v-if="
              $store.state.plugin.shbxt &&
              $store.state.plugin.shbxt.is_open == 1
            " @click="shop_show = true">选择供应商
          </el-button>
          <el-button style="margin-left: 10px" type="primary" v-if="
              $store.state.plugin.shbxt &&
              $store.state.plugin.shbxt.is_open == 1
            " @click="getSend_id(0)">自营</el-button>
        </el-form-item>

        <el-form-item label="发货地址">
          <el-col :span="10">
            <el-input v-model="shopInfo.delivery_address" placeholder="请输入发货地"></el-input>
          </el-col>
          <el-col class="tc" :span="3">产品销售保障文字提示</el-col>
          <el-col :span="9">
            <el-input v-model="shopInfo.commodity_protection" placeholder="请输入产品销售保障文字提示"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="批发价" v-if="
            $store.state.plugin &&
            $store.state.plugin.jh &&
            $store.state.plugin.jh.is_open == 1
          ">
          <el-col :span="4">
            <el-input v-model="shopInfo.trade_price">
              <template slot="append">元</template>
            </el-input>
          </el-col>
        </el-form-item>
        <template v-if="
            $store.state.plugin &&
            $store.state.plugin.lswm &&
            $store.state.plugin.lswm.is_open == 1 &&
            shopInfo.sid > 0
          ">
          <el-form-item label="商品标签">
            <el-button :loading="$store.state.isLoading" type="primary" size="medium" @click="addTags">
              添加标签
            </el-button>
            <el-button :loading="$store.state.isLoading" type="success" size="medium" @click="show_tag = true" v-if="shopInfo.tags && shopInfo.tags.length > 0">
              编辑标签
            </el-button>
            <div v-if="shopInfo.tags && shopInfo.tags.length > 0">
              <span class="lswm_tag" v-for="(tag, t) in json_to_arr(shopInfo.tags)" :key="t" :style="{ color: tag.c, background: tag.b }">
                {{ tag.n }}
              </span>
            </div>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <div class="add_con_item bor bg_write mar_bottom_25 clearfix">
      <h5>图片上传</h5>
      <el-form :label-position="labelPosition" ref="uploadElement" label-width="120px" :model="shopInfo">
        <el-col :span="24" class="mar_bottom_20">
          <el-col :span="24" class="add_prod_img">
            <ul class="el-upload-list el-upload-list--picture-card" v-if="fileList && fileList.length > 0">
              <li class="el-upload-list__item is-success zu" v-for="(item, index) in fileList" :key="index + Math.random()">
                <img :src="$fnc.getImgUrl(item.url)" alt class="el-upload-list__item-thumbnail" />
                <a class="el-upload-list__item-name">
                  <i class="el-icon-document"></i>
                </a>
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview">
                    <i @click="detailsImg(item)" class="el-icon-zoom-in"></i>
                  </span>
                  <span class="el-upload-list__item-delete">
                    <i @click="deleteImg(item, index)" class="el-icon-delete"></i>
                  </span>
                  <span class="el-upload-list__item-delete">
                    <i @click="setZhutu(item, index)" class="fmt">设置列表图</i>
                  </span>
                </span>
                <p v-if="item.isZhu == true" style="color: red">列表图</p>
                <el-progress v-if="item.imgPercent < 100" class="video_jindu_shop" type="circle" :percentage="item.imgPercent"></el-progress>
                <div class="sel_img_btn">
                  <div class="sel_img_left" @click="pre_img_btn('left', item, index)">
                    <i class="el-icon-caret-left"></i>
                  </div>
                  <div class="sel_img_right" @click="pre_img_btn('right', item, index)">
                    <i class="el-icon-caret-right"></i>
                  </div>
                </div>
              </li>
            </ul>
            <span>
              <uploadpic :shop_list="fileList" :width="150" :height="150" :real_width="640" :real_height="640" :is_more="true" :is_shop="true" :is_tip="false" @send_pic="onSuccess_shop"></uploadpic>
              <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible">
                <img width="100%" :src="$fnc.getImgUrl(dialogImageUrl)" alt />
              </el-dialog>
            </span>
          </el-col>
        </el-col>
      </el-form>
    </div>

    <div class="add_con_item bor bg_write mar_bottom_25 clearfix">
      <h5>SKU信息</h5>
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item label="SKU属性选择">
          <el-col :span="4">
            <el-select v-model="shopInfo.sku_id" @change="changeSku" placeholder="请选择" @visible-change="getNewSkuList" :loading="skuLoading">
              <el-option-group v-for="(group, k) in pro_skuoption" :key="k" :label="group.label">
                <el-option v-for="(item, z) in group.data" :key="z" :label="item.title" :value="item.id"></el-option>
              </el-option-group>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-button :loading="$store.state.isLoading" type="primary" style="margin-left: 10px" size="small" @click="addNewSku(1)">
              添加一级栏目
            </el-button>
          </el-col>
          <el-col :span="24">
            <p class="lh2 size_12 sizeColor">
              PS：商品sku，根据重量将自动计算运费
            </p>
          </el-col>
        </el-form-item>
        <div v-if="showSku">

          <el-form-item label="销售价">
            <el-col :span="4">
              <el-input v-Int v-model="danSku.price"></el-input>
            </el-col>
            <el-col :span="1" class="danjia">元</el-col>
            <el-col class="tr col_label" :span="2">销售成本&nbsp;&nbsp;&nbsp;</el-col>
            <el-col :span="4">
              <el-input v-Int v-model="danSku.cost_price"></el-input>
            </el-col>
            <el-col :span="1" class="danjia">元</el-col>
          </el-form-item>
          <el-form-item label="小红包">
            <el-col :span="4">
              <el-input v-Int v-model="danSku.small_red"></el-input>
            </el-col>
            <el-col class="tr col_label" :span="3">大红包&nbsp;&nbsp;&nbsp;</el-col>
            <el-col :span="4">
              <el-input v-Int v-model="danSku.big_red"></el-input>
            </el-col>
            <el-col :span="1" class="danjia"></el-col>
          </el-form-item>
          <el-form-item label="商品PV值">
            <el-col :span="4">
              <el-input disabled :value="
                  $fnc.toFixedZ(
                    (danSku.price - danSku.cost_price).toFixed(2),
                    2
                  )
                "></el-input>
            </el-col>
            <el-col :span="1" class="danjia">元</el-col>
            <el-col class="tr col_label" :span="2">库存&nbsp;&nbsp;&nbsp;</el-col>
            <el-col :span="4">
              <el-input v-Int v-model="danSku.stock" disabled></el-input>
            </el-col>
            <el-col :span="1" class="danjia">件</el-col>
            <el-col class="tr col_label" :span="2">商品编码&nbsp;&nbsp;&nbsp;</el-col>
            <el-col :span="4">
              <el-input v-model="danSku.hid"></el-input>
            </el-col>
            <el-col :span="24">
              <div class="lh2 size_12 sizeColor">
                PS：商品sku，根据重量将自动计算运费
              </div>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button :loading="$store.state.isLoading" type="primary" size="medium" @click="showRating = true">编辑会员等级价格</el-button>
            <el-button :loading="$store.state.isLoading" type="warning" size="medium" @click="showRating = false">收起价格编辑</el-button>
            <transition name="fade">
              <el-row class="pd_top_20" v-show="showRating">
                <el-col :span="24">
                  <el-table :show-header="false" :empty-text="' '" :data="rating" row-class-name="ruting_tab" style="width: 100%">
                    <el-table-column prop="title" align="center" label="会员等级" width="180"></el-table-column>
                    <el-table-column width="180">
                      <template slot-scope="scope">
                        <el-col :span="20">
                          <el-input v-Int v-model="scope.row.price"></el-input>
                        </el-col>
                        <el-col :span="1" class="danjia">元</el-col>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </transition>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="商品规格" class="prod_shop_guige">
            <el-col :span="24" class="bor pd_10">
              <el-col :span="24" class="bor_p">
                <el-button :loading="$store.state.isLoading" type="primary" size="mini" @click="addNewSku(2, shopInfo.sku_id)">
                  添加二级栏目
                </el-button>
              </el-col>
              <el-col :span="24" class="pd_top_10" v-for="(skuItem, index) in skuItemList" :key="index" style="border-bottom: 1px solid #e8e8e8">
                <span v-if="skuItem.is_show">
                  <el-input v-model="skuItem.title" size="small" style="width: 120px"></el-input>
                  <i class="el-icon-s-order" style="margin-left: 10px; font-size: 18px; color: #409eff" @click="updateSkuItem('skuItemList', index)"></i>
                  <i class="el-icon-close" style="margin-left: 5px; font-size: 18px" @click="setSKuShow('skuItemList', index, 0)"></i>
                </span>
                <span class="mar_bottom_15 tl" style="font-size: 15px" v-else>
                  {{ skuItem.title }}
                  <i style="margin-left: 5px; font-size: 14px" class="el-icon-edit-outline" @click="setSKuShow('skuItemList', index, 1)"></i>
                </span>
                <div v-if="!skuItem.z" style="color: #999">未添加规格</div>
                <shopsku :list="skuItem.z" :showlist="checkedCities[index]" :index="index" :item="skuItem" @setTotal="handleCheckedCitiesChange" @updateSku="updateSku">
                </shopsku>
              </el-col>
              <div class="tc" v-if="!skuItemList" style="color: #999">
                未添加规格
              </div>
            </el-col>
          </el-form-item>

          <el-form-item label="商品规格图片" class="prod_shop_guige" v-if="showImg">
            <el-row class="bor pd_10">
              <el-col :span="3" class v-for="(it, index) in skuImgListsYw" :key="index" v-show="it.parent_is_pic == 1" style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                ">
                <el-col :span="12" class="tc" v-if="it.parent_is_pic == 1">
                  <div @click="click_up_sku(it)">
                    <uploadpic :piclink="it.piclink" :width="80" :height="80" :real_width="50" :real_height="50" :is_more="false" @send_pic="onSuccess"></uploadpic>
                    <p class="tc">{{ it.title }}</p>
                  </div>
                </el-col>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item v-if="skuItemList" label="商品库存" class="prod_shop_guige">
            <el-row>
              <el-col :span="24" class="bor pd_10">
                <el-table ref="multipleTable" :data="shops" tooltip-effect="dark" header-row-class-name="head_color" style="width: 99.9%" class="parendd" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" align="center" min-width="50"></el-table-column>

                  <el-table-column v-for="(skuItem, index) in tableCol" :key="index" :label="skuItem" align="center" width="125">
                    <template slot-scope="scope">
                      <div>
                        {{
                          scope.row[index] != "undefined"
                            ? scope.row[index]
                            : ""
                        }}
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column label="销售价(元)" align="center" min-width="100">
                    <template slot-scope="scope">
                      <el-input v-Int v-model="scope.row.price"></el-input>
                    </template>
                  </el-table-column>

                  <el-table-column label="销售成本(元)" align="center" min-width="100">
                    <template slot-scope="scope">
                      <el-input v-Int v-model="scope.row.cost_price"></el-input>
                    </template>
                  </el-table-column>

                  <el-table-column label="库存(件)" align="center" min-width="100">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.stock" disabled></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="小红包" align="center" min-width="100">
                    <template slot-scope="scope">
                      <el-input v-Int v-model="scope.row.small_red"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="大红包" align="center" min-width="100">
                    <template slot-scope="scope">
                      <el-input v-Int v-model="scope.row.big_red"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品编码" align="center" min-width="100">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.hid"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品PV值" align="center" min-width="100">
                    <template slot-scope="scope">
                      <el-input disabled :value="
                          $fnc.toFixedZ(
                            scope.row.price - scope.row.cost_price,
                            2
                          )
                        "></el-input>
                    </template>
                  </el-table-column>

                  <el-table-column label="设置会员价" class-name="parend" align="center" min-width="100">
                    <template slot-scope="scope">
                      <el-button :loading="$store.state.isLoading" size="mini" @click="getShopsRow(scope.$index, scope.row)">设置</el-button>
                      <el-dialog class="ss" @close="closeTab" :modal-append-to-body="false" :visible.sync="dialogTableVisible"></el-dialog>

                      <div class="clearfix dioTab" v-if="tabIndex === scope.$index">
                        <div class="clearfix childTabs" v-for="(item, index) in scope.row.rating_json" :key="index">
                          <el-col :span="8">{{ item.title }}</el-col>
                          <el-col :span="13">
                            <el-input v-Int v-model="item.price"></el-input>
                          </el-col>
                          <el-col :span="1" class="danjia">元</el-col>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-col :span="24" class="table_bottom">
                  <el-button :loading="$store.state.isLoading" type="primary" @click="batchRating('rating')" size="mini">批量设置会员价</el-button>
                  <el-button :loading="$store.state.isLoading" type="primary" @click="batchRating('price')" size="mini">批量设置价格</el-button>
                  <el-button :loading="$store.state.isLoading" type="primary" @click="batchRating('cost_price')" size="mini">批量设置成本价</el-button>
                  <el-button :loading="$store.state.isLoading" type="primary" @click="batchRating('small_red')" size="mini">批量设置小红包</el-button>
                  <el-button :loading="$store.state.isLoading" type="primary" @click="batchRating('big_red')" size="mini">批量设置大红包</el-button>
                  <!-- <el-button :loading="$store.state.isLoading" type="primary" @click="batchRating('stock')" size="mini">批量设置成库存</el-button> -->
                </el-col>
              </el-col>
            </el-row>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="add_con_item bor bg_write mar_bottom_25 clearfix" style="overflow: hidden">
      <h5 style="display: inline">商品详情信息</h5>
      <el-row type="flex" :gutter="15" style="justify-content: center">
        <div :span="6" style="padding-right: 30px">
          <div id="diy-phone">
            <div class="diy-phone-header">
              <i class="diy-phone-receiver"></i>
              <div class="diy-phone-title j-pagetitle"></div>
            </div>
            <div class="diy-phone-contain" id="j-materialPrev">
              <dl class="mgt20">
                <dt>
                  <div class="single-summary shop-content-box" v-html="shopInfo.content"></div>
                </dt>
              </dl>
            </div>
            <i class="diy-phone-footer"></i>
          </div>
        </div>
        <div :span="12" style="margin-top: 40px">
          <ue v-model="shopInfo.content" v-loading="loadding1" v-if="!loadding1" :value="shopInfo.content" style="width: 375px" upload-url="/api/common/upload/index/" fileName="file" />
          <!-- <editor
            v-show="!shopdetail_type "
            class="editor"
            :config="config"
            v-model="shopInfo.content"
            upload-url="/api/common/upload/index/"
            fileName="file"
          />-->
        </div>
      </el-row>
    </div>

    <div class="add_con_item bor bg_write mar_bottom_25 clearfix">
      <h5>更多设置</h5>
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item label="空单费" v-if="$route.query.types == 39">
          <el-col :span="4">
            <el-input v-Int v-model="shopInfo.door_price"></el-input>
          </el-col>
          <el-col class="tr col_label" :span="3">项目工时&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-input v-Int v-model="shopInfo.door_time"></el-input>
          </el-col>
          <el-col :span="1" class="danjia">分钟</el-col>
          <el-col :span="24">
            <el-col :span="7" class="lh2 size_12 sizeColor">
              PS：用户原因取消订单扣除费用
            </el-col>
            <el-col :span="7" class="lh2 size_12 sizeColor">
              PS：开启【是否可以指定接单师傅】开关时，必须填写
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="虚拟销量">
          <el-col :span="4">
            <el-input v-Int v-model="shopInfo.invent_sale"></el-input>
          </el-col>
          <el-col :span="1" class="danjia">件</el-col>
          <el-col class="tr col_label" :span="2">真实销量&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-input v-Int v-model="shopInfo.real_sale"></el-input>
          </el-col>
          <el-col :span="1" class="danjia">件</el-col>
          <el-col class="tr col_label" :span="3">购物赠送锁仓券&nbsp;&nbsp;&nbsp;</el-col>
          <el-col :span="4">
            <el-input v-Int v-model="shopInfo.send_lock_money"></el-input>
          </el-col>
          <el-col :span="2" class="danjia"></el-col>
          <el-col :span="24"></el-col>
        </el-form-item>
        <el-form-item label="产品重量">
          <el-col :span="4">
            <el-input v-Int v-model="shopInfo.weight"></el-input>
          </el-col>
          <el-col :span="4">
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-radio v-model="shopInfo.weight_fix" label="KG">KG</el-radio>
            <el-radio v-model="shopInfo.weight_fix" label="G">G</el-radio>
          </el-col>
          <el-col :span="24">
            <div class="lh2 size_12 sizeColor">
              PS：商品sku，根据重量将自动计算运费
            </div>
          </el-col>
        </el-form-item>

        <el-form-item label="产品参数">
          <el-col :span="2" class="pd_right_15">
            <el-input v-model="pro_params_title" placeholder="标题"></el-input>
          </el-col>
          <el-col :span="12">
            <el-input v-model="pro_params_desc" placeholder="描述"></el-input>
          </el-col>
          <el-col :span="4">
            <el-button :loading="$store.state.isLoading" type="primary" class="mar_lf_10" size="medium" @click="addProParams">+</el-button>
          </el-col>
          <el-col :span="24">
            <div class="lh2 size_12 sizeColor">
              PS：新增参数需要点击+按钮，才能保存成功
            </div>
          </el-col>
        </el-form-item> 

        <el-form-item v-if="pro_params && pro_params.length > 0">
          <el-row v-for="(item, index) in pro_params" :key="index" class="mar_bottom_15">
            <el-col :span="2" class="pd_right_15">
              <el-input v-model="item.title" placeholder="标题"></el-input>
            </el-col>
            <el-col :span="12">
              <el-input v-model="item.desc" placeholder="描述"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button :loading="$store.state.isLoading" type="primary" class="mar_lf_10" size="medium" @click="downProParams(index)">-</el-button>
            </el-col>
          </el-row>
        </el-form-item>

        <el-row>
          <el-col :span="24" class="bg_f8 pd_10_20 mar_top_15 config">
            <el-col :span="12" class="product_men">
              <p class="size_13 sizeColor_333 bold">
                不允许加入购物车（开启则商品只能单独购买）
              </p>
            </el-col>
            <el-col :span="12">
              <el-switch class="zdySwith" :width="82" v-model="shopInfo.is_special" active-color="#1aad19" inactive-color="#ffffff" active-text="已开启" inactive-text="已关闭" active-value="1" @change="getIskeck($event, 'is_special')" inactive-value="1"></el-switch>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="bg_f8 pd_10_20 mar_top_15 config">
            <el-col :span="12" class="product_men">
              <p class="size_13 sizeColor_333 bold">
                是否上架（开启则在前台展示，如果关闭则前台不展示）
              </p>
            </el-col>
            <el-col :span="12">
              <el-switch class="zdySwith" :width="82" v-model="shopInfo.show" active-color="#1aad19" inactive-color="#ffffff" active-text="已开启" inactive-text="已关闭" active-value="1" @change="getIskeck($event, 'show')" inactive-value="0"></el-switch>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="bg_f8 pd_10_20 mar_top_15 config">
            <el-col :span="12" class="product_men">
              <p class="size_13 sizeColor_333 bold">
                是否为虚拟产品（开启则购买该商品不用填写收货地址）
              </p>
            </el-col>
            <el-col :span="12">
              <el-switch class="zdySwith" :width="82" v-model="shopInfo.is_virtual" active-color="#1aad19" inactive-color="#ffffff" active-text="已开启" inactive-text="已关闭" active-value="1" @change="getIskeck($event, 'is_virtual')" inactive-value="1"></el-switch>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div id="d1" class="d1"></div>
    <el-col :span="22" class="men_add tc">
      <el-card shadow="always">
        <el-button :loading="$store.state.isLoading" @click="addProductItem" @keydown.13="addProductItem">确认保存添加产品</el-button>
      </el-card>
    </el-col>
    <el-button :loading="$store.state.isLoading" @click="addProductItem">添加</el-button>

    <el-dialog :close-on-click-modal="false" :title="bothTitle" @close="closeTab" width="500px" :visible.sync="bothRating">
      <div v-if="showBoth == 'rating'">
        <el-table :show-header="false" :empty-text="' '" :data="rating1" style="width: 100%">
          <el-table-column prop="title" align="center" label="会员等级" width="180"></el-table-column>
          <el-table-column width="180">
            <template slot-scope="scope">
              <el-col :span="12">
                <el-input v-Int v-model="scope.row.price"></el-input>
              </el-col>
              <el-col :span="2" class="danjia">元</el-col>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row class v-else-if="showBoth == 'price'">
        <el-col :span="12">
          <el-input v-Int v-model="bothPrice"></el-input>
        </el-col>
        <el-col :span="2" class="danjia">元</el-col>
      </el-row>
      <el-row class v-else-if="showBoth == 'cost_price'">
        <el-col :span="12">
          <el-input v-Int v-model="bothCost_price"></el-input>
        </el-col>
        <el-col :span="2" class="danjia">元</el-col>
      </el-row>
      <el-row class v-else-if="showBoth == 'small_red'">
        <el-col :span="12">
          <el-input v-Int v-model="bothSmall_red"></el-input>
        </el-col>
        <el-col :span="2" class="danjia">元</el-col>
      </el-row>
       <el-row class v-else-if="showBoth == 'big_red'">
        <el-col :span="12">
          <el-input v-Int v-model="bothBig_red"></el-input>
        </el-col>
        <el-col :span="2" class="danjia">元</el-col>
      </el-row>
      
      <!-- <el-row class v-else-if="showBoth == 'stock'">
        <el-col :span="12">
          <el-input v-Int v-model="bothStock"></el-input>
        </el-col>
        <el-col :span="2" class="danjia">件</el-col>
      </el-row> -->
      <el-row class>
        <el-col :span="24" class="tc mar_top_20">
          <el-button :loading="$store.state.isLoading" @click="bothAdd" @keydown.13="bothAdd">保存</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- vueCropper 剪裁图片实现-->
    <el-dialog :close-on-click-modal="false" top="20px" title="图片剪裁" :visible.sync="dialogimg">
      <div class="cropper-content">
        <div class="cropper" style="text-align: center">
          <vueCropper ref="cropper" :img="crooption.img" :outputSize="crooption.size" :outputType="crooption.outputType" :info="true" :full="crooption.full" :canMove="crooption.canMove" :canMoveBox="crooption.canMoveBox" :original="crooption.original" :autoCrop="crooption.autoCrop" :fixed="crooption.fixed" :fixedNumber="crooption.fixedNumber" :centerBox="crooption.centerBox" :infoTrue="crooption.infoTrue" :fixedBox="crooption.fixedBox"></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="$store.state.isLoading" @click="dialogimg = false">取 消</el-button>
        <el-button :loading="$store.state.isLoading" type="primary" @click="finish">确认</el-button>
      </div>
    </el-dialog>

    <!-- 供应商 -->
    <xzusershop :show="shop_show" v-if="shop_show" :isAll="true" :add_types="true" showType="list" @sendShop="getSend_id" @isshow="getShow">
    </xzusershop>

    <!-- 优惠券 -->
    <xzpacket :show="shop_show_red" v-if="shop_show_red" @sendShop="getSend_id_red" @isshow="getShow_red"></xzpacket>

    <!-- shopskuAdd -->
    <el-dialog :close-on-click-modal="false" title="SKU编辑" :visible.sync="show_sku" width="600px">
      <shopskuAdd v-if="show_sku" :sku_form="sku_form" @updateSku="updateSku"></shopskuAdd>
    </el-dialog>

    <!-- 编辑标签  -->
    <el-dialog :close-on-click-modal="false" title="编辑标签" :visible.sync="show_tag" width="800px">
      <el-table :data="json_to_arr(shopInfo.tags)" border>
        <el-table-column label="标题" min-width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.n" size="small" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column label="文字颜色" min-width="100" align="center">
          <template slot-scope="scope">
            <el-col :span="20">
              <el-input v-model="scope.row.c" size="small" clearable></el-input>
            </el-col>
            <el-col :span="4" class="tr">
              <el-color-picker v-model="scope.row.c" size="mini"></el-color-picker>
            </el-col>
          </template>
        </el-table-column>
        <el-table-column label="背景颜色" min-width="100" align="center">
          <template slot-scope="scope">
            <el-col :span="20">
              <el-input v-model="scope.row.b" size="small" clearable></el-input>
            </el-col>
            <el-col :span="4" class="tr">
              <el-color-picker v-model="scope.row.b" size="mini"></el-color-picker>
            </el-col>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button :loading="$store.state.isLoading" type="success" plain size="mini" style="margin: 0 8px 0 0" @click="saveTags(scope.row, scope.$index)">
              保存
            </el-button>
            <el-button :loading="$store.state.isLoading" type="danger" plain size="mini" style="margin: 0" @click="delTag(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import shopsku from "./shopsku/shopsku";
import ue from "@/components/currency/Ue/ue.vue";
import uploadpic from "@/components/page/pic/up_pic";

import xzusershop from "@/components/currency/xz_usershop.vue";
import xzpacket from "@/components/currency/xz_packet.vue";
import shopskuAdd from "./shopsku/shopskuAdd";
export default {
  data() {
    return {
      rating1: [],
      pro_skuoption: [],
      shop_show: false,
      sku_selid: "",
      loadding1: true,
      showImg: false,
      skufileList: [],
      shopdetail_type: false,
      dialogimg: false,
      labelPosition: "right",
      load: false,
      showBoth: "", //显示批量添加dio
      bothTitle: "", //批量添加title
      bothPrice: "", //批量价格
      bothCost_price: "", //批量成本价
      bothStock: "", //批量库存
      bothSmall_red: "", //批量小红包
      bothBig_red: "", //批量大红包
      dialogVisible: false,
      bothRating: false,
      dialogImageUrl: "",
      show: "block",
      op: [],
      option: [],
      skuOption: [],
      skuItemIndex: 0,
      showRating: false,
      optionProps: {
        value: "id",
        label: "title",
        children: "z",
      },
      optionPropsku: {
        value: "id",
        label: "title",
      },
      title: "",
      skuList: [],
      showSku: true, //是否单SKU
      skuItemList: "",
      formLabelAlign: {
        domains: [{ value: [] }], //分类栏目
      },
      danSku: {
        price: "", //销售价格
        cost_price: "0", //销售成本
        small_red : "0", //销售成本
        big_red: "0", //销售成本
        stock: "0", //库存
        rating_json: [],
        iden: "",
        // pro_id:''
        hid: "",
      },
      radio: "KG",
      shopInfo: {
        types: "0",
        tb_link: "", //淘宝链接
        trade_price: "", //批发价
        title: "", //商品名称
        cate_id: "", //分类ID
        sku_id: "0", //sku
        sub_title: "",
        sku_json: "", //已选SKU串
        content: "", //内容
        piclink: "", //封面图
        img_json: "", //	上传的商品图片
        invent_sale: "", //	虚拟销量
        real_sale: "", //	真实销量
        send_score: "", //	购物赠送广告劵
        day_limit_buy: "", //	每天限购
        all_limit_buy: "", //	总限购
        weight: "", //	产品重量
        show: "1", //是否上架
        is_coupon: "0", //是否允许使用优惠券
        is_realname: "0", //是否需要实名购物
        integral_dk_per: "", //旅游劵抵扣百分比
        is_top: "", //是否置顶
        discount_number: "", //折扣件数
        discount: "10", //折扣 默认10
        is_mail: "1", //是否免邮
        weight_fix: "KG", //重量单位
        made_01: "", //赠送权值
        day_limit: "",
        is_fixed: 0, //是否固定分销
        fixed_level1: "", //1级
        fixed_level2: "", //2级
        fixed_level3: "", //3级
        is_lifting: "0",
        is_special: 0,
        sid: "",
        sid_username: "",
        sid_nickname: "",
        commodity_protection: "",
        delivery_address: "",
        rid: "",
        rid_cn: "",
        tags: "", //标签json串
      },
      defaultInfo: {
        sku: "0",
      },
      fileList: [],
      checkAll: false,
      checkedCities: [],
      shops: [],
      multipleSelection: [],
      rating: [], //会员等级
      showZhuImg: "",
      ss: "",
      tabIndex: "",
      ratingTab: [],
      dialogTableVisible: false,
      zhuIndex: -1,
      imgPercent: "0%",
      videoFlag: false,
      cateOption: [],
      imgQuality: 0.1862,

      cate_ar: [],
      crooption: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: "", // 默认生成截图框宽度
        autoCropHeight: "", // 默认生成截图框高度
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [4, 4],
        // 截图框的宽高比例
        full: true,
        original: false, // 上传图片按照原始比例渲染
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        centerBox: true,
      },
      skuTableList: [],
      skuImgList: [],
      skuImgListsYw: [],
      tableCol: [],
      pro_params: [],
      pro_params_title: "",
      pro_params_desc: "",
      skuLoading: false,
      shop_show_red: false,
      show_sku: false,
      sku_form: {},
      show_tag: false,
      types: "",
    };
  },
  methods: {
    saveTags(val, index) {
      var arr = this.json_to_arr(this.shopInfo.tags);
      arr[index] = val;
      this.shopInfo.tags = JSON.stringify(arr);
      this.show_tag = false;
    },
    delTag(index) {
      var arr = this.json_to_arr(this.shopInfo.tags);
      arr.splice(index, 1);
      this.shopInfo.tags = JSON.stringify(arr);
    },
    addTags() {
      var arr = this.json_to_arr(this.shopInfo.tags);
      arr.push({
        n: "",
        b: "#f1f1f1",
        c: "#b9b9b9",
      });
      this.shopInfo.tags = JSON.stringify(arr);
      this.show_tag = true;
    },
    json_to_arr(val) {
      try {
        var obj = JSON.parse(JSON.stringify(val));
        return JSON.parse(obj);
      } catch {
        return [];
      }
    },
    changeSkuItem() {
      if (this.shopInfo.sku_id > 0) {
        this.showSku = false;
        for (var i in this.skuList) {
          if (this.shopInfo.sku_id == this.skuList[i].id) {
            this.skuItemList = this.skuList[i].z;
            break;
          }
        }
        var col = [];
        for (var i of this.skuItemList) {
          col.push(i.title);
          for (let s of this.shops) {
            var iden_obj = s.iden.split("@");
            if (iden_obj) {
              for (let iden in iden_obj) {
                for (let j of i.z) {
                  if (iden_obj[iden] == j.parent_id + ":" + j.id) {
                    s[iden] = j.title;
                  }
                }
              }
            }
          }
        }
        this.tableCol = this.$fnc.uniq(col);
      }
    },
    updateSkuItem(item, str) {
      var params = {};
      params = JSON.parse(JSON.stringify(this[item][str]));
      delete params.z;
      this.$api.getShops.updateSku(params).then((res) => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          // this.$store.dispatch("getSkuListTree", new Date());
          this.$set(this[item][str], "is_show", false);
          this.updateSku();
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
    setSKuShow(item, str, flag) {
      this.$set(this[item][str], "is_show", flag == 1 ? true : false);
      if (flag == 0) {
        this.updateSku();
      }
    },
    updateSku() {
      this.show_sku = false;
      this.skuLoading = true;
      this.pro_skuoption = [];
      this.getSkuList(2);
    },
    getShow_red(bool) {
      this.shop_show_red = bool;
    },
    getSend_id_red(val) {
      if (val == 0) {
        this.shopInfo.rid = 0;
        this.shopInfo.rid_cn = "";
      } else {
        this.shopInfo.rid = val.id;
        this.shopInfo.rid_cn = val.title;
      }
      this.shop_show_red = false;
    },
    addNewSku(type, item) {
      if (type == 2) {
        this.sku_form = {
          title: "",
          parent_id: item,
          description: "",
          is_pic: "0",
        };
      } else {
        this.sku_form = {
          title: "",
          parent_id: "0",
          description: "",
          is_pic: "0",
        };
      }
      this.show_sku = true;
    },
    getNewSkuList(val) {
      if (val) {
        this.skuLoading = true;
        this.pro_skuoption = [];
        this.getSkuList(1);
      }
    },
    compare(property, desc) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        if (desc == true) {
          // 升序排列
          return value1 - value2;
        } else {
          // 降序排列
          return value2 - value1;
        }
      };
    },
    upGo(fieldData, index) {
      if (index != 0) {
        fieldData[index] = fieldData.splice(index - 1, 1, fieldData[index])[0];
      } else {
        fieldData.push(fieldData.shift());
      }
    },
    downGo(fieldData, index) {
      if (index != fieldData.length - 1) {
        fieldData[index] = fieldData.splice(index + 1, 1, fieldData[index])[0];
      } else {
        fieldData.unshift(fieldData.splice(index, 1)[0]);
      }
    },
    pre_img_btn(fx, item, index) {
      if (fx == "left") {
        this.upGo(this.fileList, index);
      } else {
        this.downGo(this.fileList, index);
      }
    },
    letslazyload(contentp) {
      let regexp1 = new RegExp(
        // eslint-disable-next-line no-useless-escape
        /(\<img )([^>]*)(src=")([^"]*")([^>]*)(\>)/,
        "g"
      );
      contentp = contentp.replace(
        regexp1,
        function (match, p1, p2, p3, p4, p5, p6) {
          return p1 + p2 + 'data-src="' + p4 + p5 + p6;
        }
      );
      return contentp;
    },
    getSend_id(val) {
      if (val == 0) {
        this.shopInfo.sid = 0;
        this.shopInfo.sid_username = "自营";
        this.shopInfo.sid_nickname = "自营";
      } else {
        this.shopInfo.sid = val.id;
        this.shopInfo.sid_username = val.username;
        this.shopInfo.sid_nickname = val.nickname;
        this.shop_show = false;
      }
    },
    getShow(bool) {
      this.shop_show = bool;
    },
    click_up_sku(it) {
      console.log(it);
      this.sku_selid = it.id;
    },
    onSuccess_shop(shop_list) {
      this.fileList = this.fileList.concat(shop_list);
    },

    setKuTab(arr) {
      console.log(arr);
      return arr.filter((item, i) => {
        return item.length > 0 && item[i] != "";
      });
    },

    onSuccess(pic) {
      var id = this.sku_selid;
      for (var i in this.skuImgListsYw) {
        if (id == this.skuImgListsYw[i].id) {
          console.log(1);
          // this.skuImgListsYw[i].piclink = pic;
          this.$set(this.skuImgListsYw[i], "piclink", pic);
          if (pic == "") {
            this.skuImgListsYw.splice(
              this.skuImgListsYw.findIndex((e) => e.piclink === ""),
              1
            );
          }
        }
      }
    },
    change_shop_input() {
      this.shopdetail_type = !this.shopdetail_type;
    },
    beforeupload(file) {
      this.crooption.img = URL.createObjectURL(file);
      this.dialogimg = true;
      return false;
    },
    finish() {
      var that = this;
      this.$refs.cropper.getCropData((data) => {
        this.dialogimg = false;
        // 先将显示图片地址清空，防止重复显示
        this.crooption.img = "";
        // var reader = new FileReader();
        //创建一个img对象
        var img = new Image();

        img.src = data;
        // base64地址图片加载完毕后执行
        img.onload = function () {
          // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
          var canvas = document.createElement("canvas");
          var context = canvas.getContext("2d");
          // 图片原始尺寸
          var originWidth = this.width;
          var originHeight = this.height;
          // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
          var maxWidth = 750,
            maxHeight = 750;
          // 目标尺寸
          var targetWidth = originWidth,
            targetHeight = originHeight;
          // 图片尺寸超过最大尺寸的限制
          if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
              // 更改宽度，按照宽度限定尺寸
              targetWidth = maxWidth;
              targetHeight = Math.round(
                maxWidth * (originHeight / originWidth)
              );
            } else {
              targetHeight = maxHeight;
              targetWidth = Math.round(
                maxHeight * (originWidth / originHeight)
              );
            }
          }
          //对图片进行缩放
          canvas.width = targetWidth;
          canvas.height = targetHeight;
          // 清除画布
          context.clearRect(0, 0, targetWidth, targetHeight);
          // 图片压缩
          context.drawImage(img, 0, 0, targetWidth, targetHeight);
          /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/
          //压缩后的base64文件
          var newUrl = canvas.toDataURL("image/jpeg", 0.92);
          let file = that.convertBase64UrlToBlob(newUrl);
          var fd = new FormData();
          fd.append("file", file, "file_" + Date.parse(new Date()) + ".jpg");
          fd.append("folder", "product");

          let config = {
            headers: { "Content-Type": "multipart/form-data" },
          };

          axios.post("/api/common/upload/index/", fd, config).then((res) => {
            if (res.data) {
              that.fileList.push({ url: res.data.result });
              console.log("1", that.fileList);
            } else {
              this.$message.error("图片上传失败");
              // that.fileList = [] ;
              console.log("2", that.fileList);
            }
          });
        };
      });
    },
    convertBase64UrlToBlob(urlData) {
      let bytes = window.atob(urlData.split(",")[1]); //去掉url的头，并转换为byte
      //处理异常,将ascii码小于0的转换为大于0
      let ab = new ArrayBuffer(bytes.length);
      let ia = new Uint8Array(ab);
      for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      return new Blob([ab], { type: "image/png" });
    },
    progessimg(event, file, fileList) {
      file.iszhutu = false;
      file.imgPercent = parseInt(event.percent);
      this.fileList = fileList;
    },
    getProductList() {
      var params = {};
      params.parent_id = "";
      this.$api.getShops.getProductCateTreeList(params).then((res) => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          this.option = res.data.result;
        }
      });
    },
    getSkuList(val) {
      var params = {};
      params.parent_id = "0";
      if (this.$route.query.id) {
        params.pid = this.$route.query.id;
      }
      this.$api.getShops.getProListTree(params).then((res) => {
        if (res.data.code == 200) {
          res.data.result = res.data.result || [];

          let a = { label: "平台sku", data: [] };
          let b = { label: "商家sku", data: [] };
          if (res.data.result && res.data.result.length > 0) {
            res.data.result.forEach((item) => {
              if (item.sid == 0) {
                a.data.push(item);
              } else {
                b.data.push(item);
              }
            });
          }

          let one = {
            label: "单SKU",
            data: [
              {
                id: "0",
                title: "单SKU属性",
              },
            ],
          };
          this.pro_skuoption.push(one);
          if (a.data && a.data.length > 0) {
            this.pro_skuoption.push(a);
          }
          if (b.data && b.data.length > 0) {
            this.pro_skuoption.push(b);
          }
          this.skuLoading = false;
          this.skuList = res.data.result;
          var op = {
            id: "0",
            title: "单SKU属性",
          };
          res.data.result.unshift(op);
          this.skuOption = res.data.result;
          if (val == 2) {
            this.changeSkuItem();
          } else if (this.$route.query.id && !val) {
            this.getUpdataItem();
          } else {
            this.loadding1 = false;
          }
        }
      });
    },
    getRatingList() {
      var params = {};
      params.parent_id = "0";
      this.$api.getUser.getRatingList(params).then((res) => {
        if (res.data.code == 200) {
          this.rating = res.data.result;
          this.rating1 = res.data.result;
        }
      });
    },
    addDomain() {
      this.formLabelAlign.domains.push({
        value: [],
        key: Date.now(),
      });
    },
    removeDomain(item) {
      var index = this.formLabelAlign.domains.indexOf(item);
      if (index !== -1) {
        this.formLabelAlign.domains.splice(index, 1);
      }
    },
    deleteImg(item, index) {
      var _this = this;

      this.$confirm("确定删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.zhuIndex == index) {
            this.zhuIndex = -1;
          }
          var id = item.id || "0";
          if (id == "0") {
            _this.$message.success("删除成功");
            _this.fileList.splice(index, 1);

            this.shopInfo.piclink = "";
          } else {
            var params = {};
            params.id = id;
            _this.$api.getShops.delImg(params).then((res) => {
              if (res.data.code == 200 && res.data.result) {
                _this.$message.success("删除成功");
                _this.fileList.splice(index, 1);
              } else {
                _this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    detailsImg(item) {
      this.dialogVisible = true;
      this.dialogImageUrl = item.url;
    },
    setZhutu(item, index) {
      this.zhuIndex = index;
      // item.iszhutu=true;

      for (var i in this.fileList) {
        if (index == i) {
          this.fileList[i].isZhu = true;
        } else {
          this.fileList[i].isZhu = false;
        }
      }
      this.fileList.splice();

      // if (item.id == undefined && item.response == undefined) return false;
      // if (item.id == undefined) {
      //   this.shopInfo.piclink = item.response.result;
      // } else {
      //   this.shopInfo.piclink = item.url;
      // }
    },
    handleCheckedCitiesChange(value, index) {
      let old = this.shops;
      let old_piclink = this.skuImgListsYw;
      this.shops = [];
      this.tableCol = [];
      var arr1 = [];
      var params = [];
      if (value.length == 0 && this.skuItemList.length != this.skuTableList) {
        this.checkedCities[index] = [];
      } else {
        this.checkedCities[index] = value;
      }
      arr1 = Object.values(this.checkedCities).reduce(
        //得到一个已选中的一维数组
        (a, b) => [...a, ...b],
        []
      ); //一位数组对象

      var checkObj = this.getCheck(arr1, this.skuItemList); //得到已经选择的对象

      //赋值旧的
      checkObj.forEach((item, i) => {
        let nowpiclinkSku = old_piclink.find((oldpiclink, o) => {
          return (
            oldpiclink.id == item.id && oldpiclink.parent_id == item.parent_id
          );
        });
        if (nowpiclinkSku && nowpiclinkSku.piclink) {
          item.piclink = nowpiclinkSku.piclink || "";
        }
      });
      //-----------------
      this.skuImgListsYw = checkObj;
      var arr = [];
      for (var i in this.skuItemList) {
        var a = [];
        for (var k in checkObj) {
          if (this.skuItemList[i].id == checkObj[k].parent_id) {
            a.push(checkObj[k]);
          }
        }
        a.length > 0 ? arr.push(a) : "";
      }
      params = this.descartes(arr);

      var col = [];
      for (var p in params) {
        for (var q in params[p]) {
          col.push(params[p][q].parent_title);
        }
      }

      if (params.length > 0) {
        var x = [];
        for (var l in params) {
          var obj = {};
          obj.iden = "";
          for (var jk in params[l]) {
            obj[jk] = params[l][jk].title;

            obj.iden += "@" + params[l][jk].parent_id + ":" + params[l][jk].id;
          }

          obj.price = "";
          obj.cost_price = "";
          obj.small_red = "";
          obj.big_red = "";
          obj.stock = 0;
          obj.hid = "";
          obj.rating_json = [];
          obj.iden = obj.iden.slice(1);
          x.push(obj);
        }
        if (obj.rating_json) {
          for (var a in this.rating) {
            var p = {};
            p.title = this.rating[a].title;
            p.id = this.rating[a].id;
            p.price = "";
            obj.rating_json.push(p);
          }
        }
      }
      //赋值旧的
      x.forEach((item, i) => {
        let nowoldsku = old.find((oldsku, o) => {
          return oldsku.iden == item.iden;
        });
        if (nowoldsku) {
          item.price = nowoldsku.price;
          item.cost_price = nowoldsku.cost_price;
          item.stock = nowoldsku.stock;
          item.hid = nowoldsku.hid;
          item.small_red = nowoldsku.small_red;
          item.big_red = nowoldsku.big_red;
        }
      });
      //-----------------
      this.shops = x;
      this.tableCol = this.$fnc.uniq(col);
    },
    getCheck(arr, data, city = []) {
      if (typeof data === "object") {
        for (let i = 0; arr[i] !== undefined; i++) {
          for (let j = 0; data[j] !== undefined; j++) {
            if (arr[i] === data[j].id) {
              city.push(data[j]);
            }
          }
        }
        for (let i = 0; data[i] !== undefined; i++) {
          this.getCheck(arr, data[i].z, city);
        }
      }
      return city;
    },
    descartes(list) {
      //parent上一级索引;count指针计数
      var point = {};
      var result = [];
      var pIndex = null;
      var tempCount = 0;
      var temp = [];
      //根据参数列生成指针对象
      for (var index in list) {
        if (typeof list[index] == "object") {
          point[index] = { parent: pIndex, count: 0 };
          pIndex = index;
        }
      }
      //单维度数据结构直接返回
      if (pIndex == null) {
        return list;
      }
      //动态生成笛卡尔积
      // eslint-disable-next-line no-constant-condition
      while (true) {
        // eslint-disable-next-line no-redeclare
        for (var index in list) {
          tempCount = point[index]["count"];
          temp.push(list[index][tempCount]);
        }
        //压入结果数组
        result.push(temp);
        temp = [];
        //检查指针最大值问题
        // eslint-disable-next-line no-constant-condition
        while (true) {
          if (point[index]["count"] + 1 >= list[index].length) {
            point[index]["count"] = 0;
            pIndex = point[index]["parent"];
            if (pIndex == null) {
              return result;
            }
            //赋值parent进行再次检查
            index = pIndex;
          } else {
            point[index]["count"]++;
            break;
          }
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getShopsRow(index, row) {
      if (typeof row.rating_json == "object" && row.rating_json.length == 0) {
        for (var i in this.rating1) {
          var obj = {};
          obj.id = this.rating1[i].id;
          obj.price = "";
          obj.title = this.rating1[i].title;

          // this.$set(this.shops[index].rating_json[i],'id',this.rating1[i].id)
          // this.$set(this.shops[index].rating_json[i],'price','')
          // this.$set(this.shops[index].rating_json[i],'title',this.rating1[i].title)
          // console.log(this.rating1[i])
          this.shops[index].rating_json.push(obj);
        }
      }
      this.tabIndex = index;
      this.dialogTableVisible = true;
    },
    closeTab() {
      this.tabIndex = -1;
      this.dialogTableVisible = false;
    },
    getIskeck(val, i) {
      if (i == "sho") {
        this.shopInfo.show = val;
        return;
      } else if (i == "is_coupon") {
        this.shopInfo.is_coupon = val;
        return;
      } else if (i == "is_realname") {
        this.shopInfo.is_realname = val;
        return;
      } else if (i == "is_top") {
        this.shopInfo.is_top = val;
        return;
      } else if (i == "is_mail") {
        this.shopInfo.is_mail = val;
        return;
      } else if (i == "is_virtual") {
        this.shopInfo.is_virtual = val;
        return;
      } else if (i == "is_fixed") {
        this.shopInfo.is_fixed = val;
        return;
      } else if (i == "is_lifting") {
        this.shopInfo.is_lifting = val;
        return;
      } else if (i == "is_special") {
        this.shopInfo.is_special = val;
        if (val == 0) {
          this.shopInfo.is_fixed = 0;
        }
        return;
      }
    },
    addProductItem() {
      this.shopdetail_type = 0;
      //   this.load = true;
      var params = {};
      params = this.shopInfo;
      var cate_Arr = this.formLabelAlign.domains;
      var cate_ar = [];
      for (var i in cate_Arr) {
        if (i == 0) {
          params.cate_id = cate_Arr[0].value[cate_Arr[0].value.length - 1];
        }
        if (i > 0) {
          cate_ar.push(cate_Arr[i].value[cate_Arr[i].value.length - 1]);
        }
      }
      params.cate_ar = cate_ar.join("@");
      delete this.shopInfo.cate_father;
      var imglist = JSON.parse(JSON.stringify(this.fileList));
      // eslint-disable-next-line no-redeclare
      for (var i in imglist) {
        if (imglist[i].isZhu) {
          params.piclink = imglist[i].url;
          console.log(imglist[i]);
          if (imglist[i].id) {
            this.$api.getShops.delImg({ id: imglist[i].id }).then((res) => {
              // eslint-disable-next-line no-empty
              if (res.data.code == 200) {
              } else {
                this.$message.error("添加失败，图片错误");
                return false;
              }
            });
          }
          imglist.splice(i, 1);
        }
      }

      imglist.filter((item, i) => {
        item.piclink = item.url;
        item.sort = i + 1;
      });

      params.img_json = JSON.stringify(imglist);
      if (this.showSku) {
        //单SKU
        console.log("sku");
        // this.danSku.meb=[];
        this.danSku.rating_json = [];
        var men = this.rating;
        // eslint-disable-next-line no-redeclare
        for (var i in men) {
          var pa = {};
          pa.id = men[i].id;
          pa.title = men[i].title;
          pa.price = men[i].price || 0;
          // pa.iden=men[i].iden;

          this.danSku.rating_json.push(pa);
        }

        var a = [];
        a.push(this.danSku);
        params.sku_json = JSON.stringify(a);
      } else {
        var shop = this.shops;
        params.attr = JSON.stringify(this.skuImgListsYw).replace(/""/g, "");
        params.sku_json = JSON.stringify(shop);
      }

      params.pro_params = JSON.stringify(this.pro_params);

      if (params.id) {
        this.$api.getShops.updataShopsItem(params).then((res) => {
          if (res.data.code == 200 && res.data.result) {
            var url = "";
            if (params.types > 0) {
              url = "/index/shop/event?action=" + params.types;
            } else if (params.sid > 0) {
              url = "/index/supplier/suppliershops";
            } else {
              url = "/index/shop";
            }
            this.$fnc.alertSuccess({
              text: "修改成功",
              url: url,
            });
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
          }
        });
      } else {
        if (this.types) {
          params.types = this.types;
        }
        this.$api.getShops.addShopsItem(params).then((res) => {
          if (res.data.code == 200 && res.data.result) {
            var url = "";
            // if (params.types > 0) {
            //   url = "/index/shop/event?action=" + params.types;
            // } else
            if (params.sid > 0) {
              url = "/index/supplier/suppliershops";
            } else {
              url = "/index/shop/operation_stock?pid=" + res.data.result;
            }
            this.$fnc.alertSuccess({
              text: "添加成功",
              url: url,
            });
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
          }
        });
      }
      this.load = false;
    },
    getUpdataItem() {
      var id = this.$route.query.id;
      var params = { id: id };
      this.$api.getShops.selectShopsItem(params).then((res) => {
        if (res.data.code == 200 && res.data.status == 1) {
          this.shopInfo = res.data.result;
          this.formLabelAlign.domains[0].value = res.data.result.cate_father;
          if (res.data.result.cate_ar !== "") {
            var cate_arr = JSON.parse(res.data.result.cate_ar);
            for (var x in cate_arr) {
              var obj = { value: [] };
              obj.value = cate_arr[x];
              this.formLabelAlign.domains.push(obj);
            }
          }
          var imgList = [];
          if (this.shopInfo.piclink != "") {
            res.data.result.img_json.unshift({
              piclink: this.shopInfo.piclink,
              isZhu: true,
            });
            this.zhuIndex = 0;
          }
          imgList = res.data.result.img_json;
          imgList.sort(this.compare("sort", true));
          console.log(imgList);
          for (var i in imgList) {
            var imgObj = {};
            imgObj.id = imgList[i].id;
            if (imgList[i].isZhu) {
              imgObj.isZhu = true;
              imgObj.sort = 0;
            } else {
              imgObj.isZhu = false;
              imgObj.sort = Number(imgList[i].sort);
            }
            imgObj.url = this.$fnc.getImgUrl(imgList[i].piclink);

            this.fileList[i] = imgObj;
          }
          this.shops = this.shopInfo.sku_json;

          var attr = JSON.parse(this.shopInfo.attr);
          this.skuImgListsYw = attr || [];

          var skuId = this.shopInfo.sku_id;

          if (skuId == "0") {
            this.rating = [];
            this.danSku = this.shopInfo.sku_json[0];
            for (var i in this.danSku.rating_json) {
              this.rating.push(this.danSku.rating_json[i]);
            }
            this.danSku.iden = "";
            this.showSku = true;
          } else {
            for (var i in this.skuList) {
              if (skuId == this.skuList[i].id) {
                this.skuItemList = this.skuList[i].z;
              }
            }
            this.showSku = false;

            var arrObj = [];
            var col = [];
            for (var i in this.skuItemList) {
              var arr = [];
              for (var j in attr) {
                if (this.skuItemList[i].id == attr[j].parent_id) {
                  arr.push(attr[j].id);
                  col.push(attr[j].parent_title);
                }
              }
              arrObj[i] = arr;
            }
            this.tableCol = this.$fnc.uniq(col);
            this.$nextTick(() => {
              this.checkedCities = arrObj;
              this.showSku = false;
            });
          }
          this.loadding1 = false;
          this.shopInfo.made_01 = this.$fnc.toFixedZ(this.shopInfo.made_01);
          this.shopInfo.fixed_level1 = this.$fnc.toFixedZ(
            this.shopInfo.fixed_level1
          );
          this.shopInfo.fixed_level2 = this.$fnc.toFixedZ(
            this.shopInfo.fixed_level2
          );
          this.shopInfo.fixed_level3 = this.$fnc.toFixedZ(
            this.shopInfo.fixed_level3
          );
          this.shopInfo.trade_price = this.$fnc.toFixedZ(
            this.shopInfo.trade_price
          );

          this.pro_params = JSON.parse(this.shopInfo.pro_params);

          if (this.shopInfo.sid == 0) {
            this.$set(this.shopInfo, "sid_username", "自营");
            this.$set(this.shopInfo, "sid_nickname", "自营");
          }
        } else {
          this.$fnc.alertError(res.data.result);
          setTimeout(() => {
            this.$router.push("/index/shop");
          }, 500);
        }
      });
    },
    batchRating(str) {
      this.showBoth = str;
      if (str == "rating") {
        this.bothTitle = "设置会员价";
      } else if (str == "price") {
        this.bothTitle = "设置销售价";
      } else if (str == "cost_price") {
        this.bothTitle = "设置成本价";
      } else if (str == "stock") {
        this.bothTitle = "设置库存";
      } else if (str == "small_red") {
        this.bothTitle = "设置小红包";
      } else if (str == "big_red") {
        this.bothTitle = "设置大红包";
      }

       
      if (this.multipleSelection.length == 0) {
        this.$message.error("未选择SKU");
        return false;
      }
      this.bothRating = true;
    },
    bothAdd() {
      // var sezRating=this.multipleSelection;
      var str = this.showBoth;
      this.multipleSelection.forEach((el) => {
        if (
          JSON.stringify(el.rating_json) == "[]" ||
          (el.rating_json && el.rating_json.length > 0)
        ) {
          el.rating_json = {};
          console.log(el.rating_json);
          this.rating1.forEach((rat, i) => {
            console.log(rat.id, rat.price, rat.title);
            this.$set(el.rating_json, rat.id, {
              id: rat.id,
              price: Number(rat.price),
            });
          });
        }
      });

      this.multipleSelection.forEach((el) => {
        if (str == "rating") {
          for (var i in el.rating_json) {
            for (var j in this.rating1) {
              if (this.rating1[j].id == i) {
                el.rating_json[i].id = this.rating1[j].id;
                el.rating_json[i].price = this.rating1[j].price;
                el.rating_json[i].title = this.rating1[j].title;
              }
            }
          }
        } else if (str == "price") {
          el.price = this.bothPrice;
        } else if (str == "cost_price") {
          el.cost_price = this.bothCost_price;
        } else if (str == "stock") {
          el.stock = this.bothStock;
        } else if (str == "small_red") {
          el.small_red = this.bothSmall_red;
        } else if (str == "big_red") {
          el.big_red = this.bothBig_red;
        }

        
      });
      this.bothRating = false;
    },
    changeSku(id) {
      this.shopInfo.sku_id = id;
      this.skuImgListsYw = [];
      this.skuTableList = [];
      this.showImg = false;
      if (id <= "0") {
        this.showSku = true;

        this.checkedCities = [];
      } else {
        this.showSku = false;
        for (var i in this.skuList) {
          if (id == this.skuList[i].id) {
            this.skuItemList = this.skuList[i].z;
          }
        }
      }
      this.shops = [];
    },
    changeCate(e) {
      console.log(e);
    },
    addProParams() {
      if (this.pro_params_title || this.pro_params_desc) {
        this.pro_params.push({
          title: this.pro_params_title ? this.pro_params_title : "",
          desc: this.pro_params_desc ? this.pro_params_desc : "",
        });
      }
      this.pro_params_title = "";
      this.pro_params_desc = "";
    },
    downProParams(i) {
      this.pro_params.splice(i, 1);
    },
  },

  components: {
    xzusershop,
    shopsku,
    ue,
    uploadpic,
    xzpacket,
    shopskuAdd,
  },
  beforeCreate() {
    this.load = true;
  },
  created() {
    if (this.$route.query.types) {
      this.types = this.$route.query.types;
    }
    this.getProductList(); //初始化活的商品分类数据
    this.getSkuList(); //初始化活的商品SKU数据
    this.getRatingList();

    // console.log(this.shopInfo)
  },
  mounted() {
    console.log(this.skuList);

    this.load = false;
  },
  watch: {
    skuImgListsYw(val) {
      for (var i in val) {
        if (val[i].parent_is_pic == 1) {
          this.showImg = true;
          break;
        } else {
          this.showImg = false;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.tag {
  width: 148px;
  color: #fff;
  margin-bottom: 1rem;
  background: #4ca9ff;
  text-align: center;
  border-radius: 3px;
}
.checkFirst {
  margin-left: 1.875rem;
}
.head_color {
  background: #333;
}
.fade-enter-active,
.fade-leave-active {
  transition: height 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  height: 0;
}
.childTabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
// 截图
.cropper-content {
  .cropper {
    width: auto;
    height: 800px;
  }
}
.materialPrePanel {
  max-height: 468px;
  overflow: auto;
}
.sel_img_btn {
  /* position: absolute; */
  width: 100%;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  visibility: hidden;
}
.zu:hover .sel_img_btn {
  visibility: visible;
  cursor: pointer;
}
.sel_img_left {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.sel_img_right {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.sel_img_btn i {
  font-size: 22px;
  color: #ffffff;
}
.sel_img_left:hover .sel_img_right:hover {
  cursor: pointer;
}

.lswm_tag {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1;
  border-radius: 3px;
  margin: 10px 10px 5px 0;
}
</style>
